<template>
	<view class="camera_page">
		<view class="camera_content">
			<view class="code_close" @click="closeClick()">
				<img src="/static/icon/fail_icon.png">
			</view>
			<view class="loop_line"></view>
			<view class="video_nav">
				<video id="video_nav_id" autoplay :controls="false"></video>
				<view class="scan-mask" :style="{ top: maskTop + 'px', height: maskHeight + 'px' }"></view>
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	// import 'webrtc-adapter'
	import {
		BrowserMultiFormatReader,
		BarcodeFormat,
		DecodeHintType
	} from '@zxing/library'
	const codeReader = ref(null)
	const deviceId = ref(null)
	const videoInputDevices = ref([])
	const result = ref(null)
	const hints = new Map();
	const formats = [BarcodeFormat.EAN_8, BarcodeFormat.UPC_A, BarcodeFormat.UPC_E, BarcodeFormat.EAN_13, BarcodeFormat
		.CODABAR, BarcodeFormat.CODE_128, BarcodeFormat.CODE_39, BarcodeFormat.CODE_93,
		BarcodeFormat.ITF, BarcodeFormat.RSS_14, BarcodeFormat.RSS_EXPANDED, BarcodeFormat
		.QR_CODE, BarcodeFormat.RSS_14
	];

	const initEvent = () => {
		// 这里的处理是因为uniapp会对video标签进行二次封装，如果是Vue的话直接获取video标签
		var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0] // uniapp
		// var video = document.getElementById('video_nav_id') //Vue
		video.setAttribute('id', 'video_id')
		video.setAttribute('class', 'video_calss')
		// video.setAttribute('style', 'width: 100vw;height:100vh;position:absolute;top:0;left:0;')
		hints.set(DecodeHintType.PURE_BARCODE, formats);
		codeReader.value = new BrowserMultiFormatReader(hints);
		codeReader.value.listVideoInputDevices().then(res => {
			console.log("res=" + JSON.stringify(res));
			if (res.length > 0) {
				// deviceId.value = videoInputDevices[0].deviceId
				// // 获取第一个摄像头设备的名称
				// const videoInputDeviceslablestr = JSON.stringify(
				// 	videoInputDevices[0].label
				// )
				// if (videoInputDevices.length > 1) {
				// 	// 判断是否后置摄像头
				// 	if (videoInputDeviceslablestr.indexOf('back') > -1) {
				// 		deviceId.value = videoInputDevices[0].deviceId
				// 	} else {
				// 		deviceId.value = videoInputDevices[1].deviceId
				// 	}
				// }
				videoInputDevices.value = res
				deviceId.value = res[1].deviceId;
				// codeReader.value && codeReader.value.reset();
			} else {
				// 没有可用的摄像头
				// todo
			}
		}).catch(err => {
			console.error("error=" + err)
		})
		startScanning()
	}
	onLoad(() => {
		setTimeout(() => {
			initEvent();
		}, 1000);
	});
	const startScanning = () => {
		try {

			codeReader.value.decodeFromVideoDevice(deviceId.value, 'video_id', (res, err) => {
				console.log("res=" + JSON.stringify(res));
				if (res) handleScanningResult(res)
			})
		} catch (err) {
			uni.showToast({
				title: `初始化失败${err}`,
				icon: 'none'
			});
		}
	}
	const handleScanningResult = (res) => {
		// 这里处理扫描结果
		stopScanning()
		// result.value = res.text
		uni.$emit('scanResult', res.text); //返回需要获取到扫码结果的页面,提交数据
		uni.navigateBack()
	}
	// 停止扫描
	const stopScanning = () => {
		codeReader.value.reset()
	}
	const closeClick = () => {
		// todo
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>